<template>
  <div class="coupon">
<!--头部-->
    <div class="coutit">
      <div class="coule"><span class="iconfont icon-iconfontjiantouzuo"></span></div>
      <div class="couri"><span>领券中心</span></div>
    </div>

    <!--路由部分-->
    <!--<div >-->
      <!--<router-link to="/">Home</router-link> |-->
      <!--<router-link to="/zhekou">About</router-link>-->
    <!--</div>-->
    <!--<router-view/>-->
    <div class="coucon">
      <div class="coulist">
        <ul>
          <li :key="i" v-for="(cou,i) in couponlist">

            <div class="coua">
              <div>
                <span>{{cou.couponType==true?"满减券":"折扣券"}}</span>

              </div>
            </div>

            <div class="coub">
              <div class="coubb"><span>{{cou.couponType==true?"商城满减券":"商城折扣券"}}</span></div>
              <div class="coucc">
              <span>{{cou.couponValue}}{{cou.couponType==true?"￥":"折"}}</span>
                <div> <span class="coudd">{{cou.couponType==true?"满":"折扣上限"}}{{cou.couponDoor}}{{cou.couponType==true?"可用":""}}</span></div>

              </div>
            </div>

            <div class="couc">
              <div class="chart"><span>已领2%</span></div>
              <div  @click="addcoupon(cou.couponId)" class="coubtn"><span>点击领取</span></div>
            </div>
          </li>

        </ul>
      </div>
    </div>

  </div>
</template>

<script>
    export default{
        name: 'app.vue',
        data(){
            return{
               couponlist:[],//优惠券列表
                isshow:"block",
            }
        },
        methods:{
            // change(event){
            //     // event.target.style.display='none';
            //     // this.couponlist.couponState=!this.couponlist.couponState
            //     console.log(event)
            // },
            // test(v){
            //     console.log(v)
            // },
            addcoupon(id){
                this.axios({
                    method:'get',
                    url:'http://115.28.137.176:8098/coupon/couponGet',
                    params:{
                         "userId":1,
                         "couponId":id
                    }
                }).then((res)=>{
                    console.log(res.data.data);
                }).catch(()=>{

                })

            }
        },

        created(){
                this.axios({
                    method:'get',
                    url:'http://115.28.137.176:8098/coupon/couponSelect?id=1',
                    data:{
                    }
                }).then((res)=>{
                    this.couponlist=res.data.data;
                    console.log(this.couponlist)
                }).catch(()=>{

                })
            }

    }




</script>




<style lang="less">
  @baseFontSize:20px;
  @baseSize:20;
  @beijing:#ffffff;
  @ziti:#242424;
  @ziti2:#232323;
  html{
    font-size: @baseFontSize;
  }

  *{
    margin:0;
    padding: 0;
    list-style: none;
  }
  a{
    text-decoration:none
  }
  .px2rem(@name,@px){
      @{name}:@px / @baseSize /2 * 1rem;
  }
  /*/2  /3 是根据设计师给你的是几倍图来定的*/
.coupon{
  .px2rem(width,750);
  background:@beijing;
  .coutit{
    .px2rem(width,750);
    .px2rem(height,35);
    .px2rem(font-size,35);
    .px2rem(margin-top,20);
    display: flex;
    .coule{
      .px2rem(margin-left,30)
    }
    .couri{
      .px2rem(margin-left,240)
    }
  }
  .coucon{
    .px2rem(width,750);
    height: 100%;
    .px2rem(margin-top,20);
    position: absolute;
    background: #fafafa;
    .coulist{
      .px2rem(width,750);
      .px2rem(margin-top,30);
      ul{
        .px2rem(width,750);
        li{
          .px2rem(width,710);
          .px2rem(height,210);
          display: flex;
          .px2rem(margin-left,20);
          .px2rem(margin-top,30);
          background: @beijing;
          .coua{
            .px2rem(width,190);
            .px2rem(height,210);
            color: @beijing;
            display: flex;
            justify-content: center;
            align-items: center;
            .px2rem(font-size,36);
            div{
              .px2rem(width,155);
              .px2rem(height,155);
              display: flex;
              background: #f9a3ae;
              justify-content: center;
              align-items: center;
              span{
              }
              p{
                .px2rem(margin-top,100)
              }
            }
          }
          .coub{
            .px2rem(width,340);
            .px2rem(height,210);
            .coubb{
              .px2rem(margin-left,15);
              .px2rem(margin-top,35);
              color: @ziti;
              .px2rem(font-size,30)
            }
            .coucc{
              display: flex;
              .px2rem(margin-top,50);
              .px2rem(font-size,40);
              color: #b60006;
              span{
                .px2rem(margin-left,10)
              }
              div{
                .px2rem(width,220);
                .px2rem(margin-top,12);
                .px2rem(font-size,20);
              }
              .coudd{

                border: 1px solid #b60006;
                border-radius: 2em 2em 2em 2em ;
              }
            }
          }
          .couc{
            border-left: dashed 2px wheat;
            .px2rem(width,180);
            .px2rem(height,210);
            .chart{
              .px2rem(width,90);
              .px2rem(height,90);
              .px2rem(margin-left,40);
              .px2rem(margin-top,20);
              .px2rem(font-size,20);
              border-radius: 50%;
              border:4px solid #ee8884;
              display: flex;
              justify-content: center;
              align-items: center;
            }
            .coubtn{
              .px2rem(width,150);
              background:#4990e2 ;
              color: @beijing;
              .px2rem(font-size,32);
              border-radius: 2em 2em 2em 2em ;
              display: flex;
              justify-content: center;
              .px2rem(margin-left,20);
              .px2rem(margin-top,20)
            }
          }
        }
      }
    }
  }
}


</style>
